<template>
	<view class="select">
		<view class="list">
			<view :class="['item', {'actived':typeInd==0}]" @click="selType(0)">بارلىق</view>
			<scroll-view scroll-x="true" scroll-with-animation class='scroll-view'>
				<view :class="['item', {'actived':typeInd==1}]" @click="selType(1)">كىنولار</view>
				<view :class="['item', {'actived':typeInd==2}]" @click="selType(2)">قىسىملىق</view>
				<view :class="['item', {'actived':typeInd==3}]" @click="selType(3)">سەنئەت</view>
				<view :class="['item', {'actived':typeInd==4}]" @click="selType(4)">كارتۇن</view>
			</scroll-view>
		</view>
		<view class="list">
			<view :class="['item', {'actived':dolatInd==0}]" @click="seldolat(0)">بارلىق</view>
			<scroll-view scroll-x="true" scroll-with-animation class='scroll-view'>
				<view :class="['item', {'actived':dolatInd==item.id}]" v-for="(item,index) in searchObj.rayon"
					:key="index" @click="seldolat(item.id)">
					{{item.category_name}}
				</view>
			</scroll-view>
		</view>
		<view class="list">
			<view :class="['item', {'actived':fenbie==0}]" @click="selfenbie(0)">بارلىق</view>
			<scroll-view scroll-x="true" scroll-with-animation class='scroll-view'>
				<view :class="['item', {'actived':fenbie==item.id}]" v-for="(item,index) in searchObj.tur" :key="index"
					@click="selfenbie(item.id)">
					{{item.category_name}}
				</view>
			</scroll-view>
		</view>
		<view class="list">
			<view :class="['item', {'actived':timeInd==0}]" @click="seltime(0)">بارلىق</view>
			<scroll-view scroll-x="true" scroll-with-animation class='scroll-view'>
				<view :class="['item', {'actived':timeInd==item.id}]" v-for="(item,index) in searchObj.yil" :key="index"
					@click="seltime(item.id)">
					{{item.category_name}}
				</view>
			</scroll-view>
		</view>
		<view class="list">
			<view :class="['item', {'actived':vip==0}]" @click="selvip(0)">بارلىق</view>
			<scroll-view scroll-x="true" scroll-with-animation class='scroll-view'>
				<view :class="['item', {'actived':vip==1}]" @click="selvip(1)">
					ھەقسىز
				</view>
				<view :class="['item', {'actived':vip==2}]" @click="selvip(2)">
					ھەقلىق
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			searchObj: {
				type: Object,
				require: true,
			},
			typeInd: {
				type: Number | String,
				require: true,
			},
			dolatInd: {
				type: Number | String,
				require: true,
			},
			fenbie: {
				type: Number | String,
				require: true,
			},
			timeInd: {
				type: Number | String,
				require: true,
			},
			vip: {
				type: Number | String,
				require: true,
			},
		},
		data() {
			return {

			}
		},
		methods: {
			setParentData(obj) {
				this.$emit('setParentData', obj)
				this.$emit('handleSearch')
			},
			//选择分类
			selType(typeInd) {
				this.setParentData({
					typeInd,
					page: 0,
				})
			},
			//选择国家
			seldolat(dolatInd) {
				this.setParentData({
					dolatInd,
					page: 0,
				})
			},
			//选择分别
			selfenbie(fenbie) {
				this.setParentData({
					fenbie,
					page: 0,
				})
			},
			//选择时间
			seltime(timeInd) {
				this.setParentData({
					timeInd,
					page: 0,
				})
			},
			//选择VIP
			selvip(vip) {
				this.setParentData({
					vip,
					page: 0,
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.select {
		padding: 10px 0 20px;

		.list {
			display: flex;
			justify-content: end;
			align-items: center;
			font-size: 16px;
			direction: rtl;
			padding: 0 10px;
			margin-bottom: 12px;

			&:last-of-type {
				margin-bottom: 0;
			}
		}

		.scroll-view {
			direction: rtl;
			display: inline-block;
			overflow: hidden;
			white-space: nowrap;
			padding-right: 10px;
			box-sizing: border-box;
		}

		.item {
			direction: rtl;
			display: inline-block;
			margin-left: 10px;
			border-radius: 16px;
			height: 32px;
			padding: 0 12px;

			&:last-of-type {
				margin-left: 0;
			}

			&.actived {
				color: #fff;
				background-image: linear-gradient(45deg, #0489f4, #19b3bf);
			}
		}


	}
</style>